<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 响应式的导航栏</title>
	<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style type="text/css">
		.projects .thumbnail {
		    display: block;
		    margin-left: auto;
		    margin-right: auto;
		    text-align: center;
		    max-width: 310px;
		    margin-bottom: 30px;
		    border-radius: 0;
		}
		.projects-header {
		    width: 70%;
		    text-align: center;
		    margin: 60px 0 10px;
		    font-weight: 200;
		    margin-bottom: 40px;
		    display: block;
		    margin-left: auto;
		    margin-right: auto;
		}
		.title-fast {
		    width: 100%;
		    white-space: nowrap;
		}
		.draw-list {
		    display: inline-block;
		    width: 4px;
		    height: 4px;
		    font-size: 0;
		    background-color: #dddddd;
		    vertical-align: middle;
		}
		.title-fast a {
		    font-size: 15px;
		    line-height: 16px;
		    color: #333333;
		    margin: 0;
		    font-weight: normal;
		    height: 16px;
		    outline: none;
		}
		.news{
			margin: 30px;
		}
	</style>
</head>
<body>

	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container"> 
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target="#example-navbar-collapse">
					<span class="sr-only">切换导航</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">社区电影网</a>
			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">最新</a></li>
					<li><a href="#">地区</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							类别 <b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">言情</a></li>
							<li><a href="#">科幻</a></li>
							<li><a href="#">喜剧</a></li>
							<li class="divider"></li>
							<li><a href="#">成人</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!--<div class="" style="margin-top: 60px; border: 1px solid black;">
	</div>-->
	<div class="container" style="margin-top: 55px;margin-bottom: 20px;">
		<div class="row">
			<div class="col-lg-6 col-md-6">
				<div id="myCarousel" class="carousel slide">
				    <!-- 轮播（Carousel）指标 -->
				    <ol class="carousel-indicators">
				        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				        <li data-target="#myCarousel" data-slide-to="1"></li>
				        <li data-target="#myCarousel" data-slide-to="2"></li>
				    </ol>   
				    <!-- 轮播（Carousel）项目 -->
				    <div class="carousel-inner">
				        <div class="item active">
				            <img src="images/Meinv017.jpg" alt="First slide">
				        </div>
				        <div class="item">
				            <img src="images/Meinv018.jpg" alt="Second slide">
				        </div>
				        <div class="item">
				            <img src="images/Meinv019.jpg" alt="Third slide">
				        </div>
				    </div>
				    <!-- 轮播（Carousel）导航 -->
				    <a class="carousel-control left" href="#myCarousel" 
				        data-slide="prev">&lsaquo;
				    </a>
				    <a class="carousel-control right" href="#myCarousel" 
				        data-slide="next">&rsaquo;
				    </a>
				</div>
			</div>
			<div class="col-lg-6 col-md-6">
				<div class="news">
					<h6 class="title-fast">
	                    <i class="draw-list"></i>
	                    <a href="#">第11届亚洲电影大奖揭晓：范冰冰浅野忠信分获影后影帝</a>
	                </h6>
	                <h6 class="title-fast">
	                    <i class="draw-list"></i>
	                    <a href="#">南征北战激昂献唱《非凡任务》片尾曲 打响最热血主旋律</a>
	                </h6>
	                <h6 class="title-fast">
	                    <i class="draw-list"></i>
	                    <a href="#">《喜欢你》新剧照 "男秘书vs女网红"孙艺洲奚梦瑶吃出爱</a>
	                </h6>
	                <h6 class="title-fast">
	                    <i class="draw-list"></i>
	                    <a href="#">内地票房:《美女与野兽》3亿登顶 《一条狗的使命》坚挺</a>
	                </h6>
	                <h6 class="title-fast">
	                    <i class="draw-list"></i>
	                    <a href="#">周冬雨变身“指甲刀人魔” 回应被称“小周迅”逗乐观众</a>
	                </h6>
				</div>
			</div>
		</div>
	</div>
	
	<div class="container projects">
		<div style="text-align: center;">
			<h2 style="font-size: 42px;">新片推荐</h2>
		</div>
		<div class="row">
			<div class="col-sm-6 col-md-4 col-lg-3">
				<div class="thumbnail" style="height: 352px;">
					<a href="#">
						<img src="images/Meinv022.jpg" style="width: 300px;"/>
					</a>
					<div class="caption">
						<h3>
							<a href="#">
								电影123
								<br />
								<small>by @sd</small>
							</a>
						</h3>
						<p>电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3">
				<div class="thumbnail" style="height: 352px;">
					<a href="#">
						<img src="images/Meinv022.jpg" style="width: 300px;"/>
					</a>
					<div class="caption">
						<h3>
							<a href="#">
								电影123
								<br />
								<small>by @sd</small>
							</a>
						</h3>
						<p>电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3">
				<div class="thumbnail" style="height: 352px;">
					<a href="#">
						<img src="images/Meinv022.jpg" style="width: 300px;"/>
					</a>
					<div class="caption">
						<h3>
							<a href="#">
								电影123
								<br />
								<small>by @sd</small>
							</a>
						</h3>
						<p>电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3">
				<div class="thumbnail" style="height: 352px;">
					<a href="#">
						<img src="images/Meinv022.jpg" style="width: 300px;"/>
					</a>
					<div class="caption">
						<h3>
							<a href="#">
								电影123
								<br />
								<small>by @sd</small>
							</a>
						</h3>
						<p>电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3">
				<div class="thumbnail" style="height: 352px;">
					<a href="#">
						<img src="images/Meinv022.jpg" style="width: 300px;"/>
					</a>
					<div class="caption">
						<h3>
							<a href="#">
								电影123
								<br />
								<small>by @sd</small>
							</a>
						</h3>
						<p>电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3">
				<div class="thumbnail" style="height: 352px;">
					<a href="#">
						<img src="images/Meinv022.jpg" style="width: 300px;"/>
					</a>
					<div class="caption">
						<h3>
							<a href="#">
								电影123
								<br />
								<small>by @sd</small>
							</a>
						</h3>
						<p>电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-4 col-lg-3">
				<div class="thumbnail" style="height: 352px;">
					<a href="#">
						<img src="images/Meinv022.jpg" style="width: 300px;"/>
					</a>
					<div class="caption">
						<h3>
							<a href="#">
								电影123
								<br />
								<small>by @sd</small>
							</a>
						</h3>
						<p>电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>